<template>
    <div  class="navbar" ref="container" style="width:100%;height: 100%">
        <a-layout  id="components-layout-demo-fixed-sider" style="height: 100%" >
            <div class="shade" @click="useShow=false;useId = ''" v-if="useShow"></div>
            <a-layout-header class="MainLayout_hearlist"  :style="{background:background}" v-if="!hideArea && !hideAreaLocal">
                <div class="logo-header" :style="{width:'210px'}">
                    <!--logo-->
                    <div v-if="systemStyle ==='fluctuate'"
                         class="rxMainLayout_logo"
                         :style="{background:background}"
                    >
                        <span style="color: #fff">{{ $route.meta.keepAlive }}</span>
                        <logo  :class="{'logofold':collapsed}" />
                    </div>
                    <div v-else class="rxMainLayout_logo">
                        <span style="color: #fff">{{ $route.meta.keepAlive }}</span>
                        <logo />
                    </div>
                </div>
                <div class="container-layout">
                    <main-head
                        @handClick="handClick"
                        :appKey="appKey"
                        :menus="menus"
                        :background="background"
                        :front-type="frontType"
                    ></main-head>
                </div>
                <div>
                    <right-tool-bar :front-type="frontType"></right-tool-bar>
                </div>
            </a-layout-header>

            <a-layout style="z-index: 9" >
                <a-layout-sider
                    v-if="leftMenu.children && !hideArea && !hideAreaLocal"
                    :collapsed="collapsed"
                    class="rxMenuBox"
                    :width="width"
                    collapsedWidth="80px"
                    collapsible
                >
                    <!--左侧菜单-->
                    <div class="rxMainLayoutUse" :class="{rxMainLayoutUse_white:true}">
                        <!--左边菜单栏目-->
                        <div style="width: 100%;">
                            <div v-if="openFront" class="miniFront" :title="activeFront.title">
                                <template v-if="activeFront.icon">
                                    <rx-use-icon  :menu="activeFront.icon"> </rx-use-icon>
                                </template>
                                {{ $i18(activeFront.title) }}
                            </div>
<!--                            <view-menu-->
<!--                                :view-menus="layoutLeftMenu.children"-->
<!--                                :collapsed="collapsed"-->
<!--                                v-model="checked"-->
<!--                                :extend="openKeys"-->
<!--                                @change="handleMenuClick"-->
<!--                            ></view-menu>-->
                            <left-menu :menu="layoutLeftMenu" @setOpen="setOpen" ></left-menu>
                        </div>
                    </div>
                    <!--    底部折叠区域            -->
                    <template slot="trigger">
                        <div class="rx-version-box" :class="{'rx-version-padding':!collapsed}">
                            <div class="rx-version" v-if="!collapsed">
                                版本号：{{version}}
                            </div>
                            <a-icon class="trigger" v-if="leftMenu.length !=0"  :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle" />
                        </div>
                    </template>
                </a-layout-sider>
                <a-layout-content>
                    <div class="index-layout-centers">
                        <!--面包屑-->
                        <div>
                            <navigation-bar
                                v-if="!hideArea && !hideAreaLocal" :collapsed="collapsed"
                                @navClick="navClick"  @adhibitionUser="adhibitionUser"
                                @homePageChange="handHomePageChange"

                            ></navigation-bar>
                        </div>
                        <!--中间区域-->
                        <div class="center">
                            <div class="frontLoading" v-if="openFrontLoading">
                                <span style="display: inline-block;">
                                    <a-spin size="large" />
                                    <p>
                                        {{ i18n('mainLayout.loading', '微前端加载中') }}
                                    </p>
                                </span>
                            </div>
                            <div id="appPortalHome" ref="appPortalHome" v-show="openFront" ></div>
                            <div v-show="!openFront"  class="app-layout">
                                <template v-if="showType=='window'">
                                    <router-view  />
                                </template>
                                <template v-else>
                                    <component :is='item.cmpt' :ref="'ref' + `${item.key}`" :key="item.key"
                                        v-for="(item, index) of componentAry" :menuParams="item.params"
                                        v-show="item.key == activeKey" v-bind="item.props" :menuId="item.id">
                                    </component>
                                </template>
                            </div>
                        </div>
                    </div>
                </a-layout-content>
            </a-layout>
            <!-- 加载条 -->
            <a-spin class="load-span" v-if="loading" />
        </a-layout>
    </div>
</template>
<script>
import Logo from '@/components/tools/Logo';
import {
    mapState,
    mapActions,
    mapMutations,
    mapGetters,
} from 'vuex';
import RightToolBar from './compoment/main/RightToolBar';
import LeftMenu from "./compoment/main/LeftMenu";

import NavigationBar from "./compoment/main/NavigationBar";
import EventListener from "@/views/modules/form/core/formsolution/EventListener";
import miniFront from "./miniFront/miniFront";
import MainHead from "../layouts/MainHead"
import { ParamsEncrypt } from "@lowcode/jpaas-common-lib"
import { getParentNode, getParentPath,getMenuByKey} from "@/utils/routerUtil";

import waterMark from "@/assets/js/initWaterMark";
import SysAppApi from "@/api/system/core/sysApp";
import {RxUseIcon} from "@lowcode/jpaas-common-lib"
import SysPropertiesApi from "@/api/system/core/sysProperties";
// import viewMenu from "@/layouts/layout-controls/view-menu.vue";
export default {
    name: 'main-layout',
    mixins: [EventListener, miniFront, waterMark, ParamsEncrypt],
    components: {
        RxUseIcon,
        NavigationBar,
        Logo,
        RightToolBar,
        LeftMenu,
        MainHead,
        // viewMenu
    },
    computed: {
        ...mapState({
            menus: state => state.appSetting.menus,
            menuMap: state => state.appSetting.menuMap,
            navigation: state => state.appSetting.navigation,
            loading: state => state.appSetting.loading,
            showType: state => state.appSetting.showType,
            background: (state) => state.appSetting.background,
            sideBar_Background: (state) => state.appSetting.sideBar_Background,
            systemStyle: (state) => state.appSetting.systemStyle,
            openFront: (state) => state.appSetting.openFront,
            openFrontLoading: (state) => state.appSetting.openFrontLoading,
            collapsed: (state) => state.appSetting.collapsed,
            activeFront: (state) => state.appSetting.activeFront,
            hideArea: (state) => state.appSetting.hideArea,
            frontType:(state) => state.appSetting.frontType,
            openKeys: state => state.appSetting.openKeys
        }),
        ...mapGetters({'appKey' : 'appSetting/getAppKey','activeKey':'appSetting/getActiveKey'} ),
        hideAreaLocal(){
            return localStorage.getItem("hideArea");
        },
        /**
         * 获取当前的TAB
         * @returns {*}
         */
        navTabs() {
            return this.navigation[this.frontType || 'admin'];
        },
        /**
         *
         * navType
         */
        navType() {
            return 1;
        },
        layoutLeftMenu(){
            this.leftMenu.children = this.sorts(this.leftMenu.children,'sn');
            return this.leftMenu;
        }
    },

    data() {
        return {
            routeKeepAlive: true,
            routeKey: 'K',
            //左侧菜单对象
            leftMenu: {},
            //需要渲染组件
            componentAry: [],
            //应用标识，use常规，collect收藏应用
            useId: '',
            //是否展示应用
            useShow: false,
            width:'210px',
            version:'',
            checked:[],
        }
    },
    created() {
        this.getAllApps();
        //是否根据已有的路由加载左侧菜单。
        this.init();

        if (this.showType != "window") {
            this.setComponentAry('onload');
        }
        var self_ = this;
        this.$bus.on('handUrlClick', (item) => {
            self_.leftMenu = item;
            self_.setAppKey(item.key); //添加面包屑
        })
    },

    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "layoutsLang", key);
        },
        sorts(list,field){
            if(!list){ return }
            let arr = list.sort((a,b)=>a[field] - b[field])
            arr.forEach(item=>{
                item.children = this.sorts(item.children,field);
            })
            return arr
        },
        ...mapActions({
            Logout: "user/Logout"
        }),
        ...mapMutations('appSetting', ['setAppKey', 'setMenuPath', 'setSelecteKeys', 'setActiveKey', 'setAppMenuId',
            'setOpenKeys', 'setBreadList','setOpenFront','setOpenFrontLoading','setNavigation','setCollapsed','setSiteName',
            'setActiveFront','setAllApps','setFrontType','setMenuStyle','backgroundkey','sideBar_Backgroundkey','setsystemStyle'
        ]),
        handleMenuClick({menu}){
            this.setOpen(menu)
        },
        setOpen(pane){
            let _menus = this.menus;
            let parentMenuArr = getParentNode(_menus, pane.id);
            if (parentMenuArr.length > 0) {
                let parentArr = parentMenuArr.slice(0, parentMenuArr.length - 1);
                let arrkey = parentArr.map(item => {
                    return item.key;
                })
                this.setAppKey(parentArr[0].key);
                this.setOpenKeys(arrkey);
            }
        },
        /**
         * 导航 对应展开左侧菜单
         */
        navClick(pane) {
            let _menus = this.menus;
            if (pane.id) {
                let parentMenuArr = getParentNode(_menus, pane.id);
                this.leftMenu = parentMenuArr[parentMenuArr.length - 1];
                this.setAppKey(parentMenuArr[parentMenuArr.length - 1].key);
                if (parentMenuArr[1]) {
                    this.setOpenKeys([parentMenuArr[1].key]);
                }
            }else if(['admin-index','home-index'].includes(pane.key)){
                this.leftMenu = {};
            }
        },
        close() {
            this.useShow = false;
            this.useId = '';
        },
        openFirstFront(item) {//获取微前端第一个菜单；
            if (!item.children) { return '' };
            let getFirstMenu = (arr) => {
                let firstMenu = arr[0];
                if (!firstMenu.children) {
                    return firstMenu;
                } else
                    if (firstMenu.children && firstMenu.children.length > 0) {
                        return getFirstMenu(firstMenu.children);
                    }
            }
            //获取第一个菜单；
            let menu = getFirstMenu(item.children);
            let _parent = this.$router.options.routes.find(parent => {
                return parent.id == menu.appId;
            })
            let parentMenuArr = getParentPath([_parent], menu.id);
            let firstPath = parentMenuArr.reverse().map(obj => {
                return obj.path;
            }).join('/')
            return { firstPath: firstPath, firstMenu: menu };
        },
        /**
         * 响应应用点击。
         * @param item
         */
        handClick(item) {
            //开新页面.
            if(item.menuNavType == 3){
                window.open(item.appPath,"_blank");
                return ;
            }

            //设置应用KEY
            if (item.key != 'screen') {
                this.setAppKey(item.key);
                this.leftMenu = item;
            }

            if (item.menuNavType == "2") {//内置微前端打开
                //获取微前端第一个菜单和路由；
                let { firstPath, firstMenu } = this.openFirstFront(item);
                this.innnerFrontOpen(item, firstPath, firstMenu);
                return;
            }
            //设置还原window的vue挂载
            if (window.Vue2) {
                window.Vue = window.Vue2;
                window.Vue2 = undefined;
            }
            //清除微前端选中；
            this.setActiveFront({})
            //设置是否打开微前端，这里全部给false,当进入微前端时，会在main.js中设置状态;
            this.setOpenFront(false);
            //设置问前端loading状态
            this.setOpenFrontLoading(false);

            this.firstActive(item);
        },
        adhibitionUser(item) {
            this.close();
            this.leftMenu = item;
            this.setAppKey(item.key); //添加面包屑
            if (item.menuNavType != "2") {
                this.firstActive(item);
            }
        },
        //面包屑
        handNavBars(item) {
            if (item.key === 'design') {
                this.setActiveKey("admin-index")
                return
            }
            this.setActiveKey(item.key)
            let isIndex = this.navTabs.findIndex(nav => { return nav.key == item.key });
            if (isIndex < 0) {
                this.navigation[this.frontType] = [...this.navTabs, item];
            }
        },
        columnlist(item) {
            if (item.id) {
                let parentArr = getParentNode(this.menus, item.id).reverse();
                this.setBreadList(parentArr);
            }
        },
        handMenuPath(menu) {
            var pathParams = {
                name: menu.key
            };
            if (menu.appType == '1') {
                pathParams.query = { appId: menu.appId };
            }
            return pathParams;
        },
        getChildren(item) { //
            let _item = item;
            if (_item.showType && _item.component) {
                return _item;
            }
            while (_item.children) {
                _item = _item.children[0];
            }
            return _item;
        },
        /**
         * 点击头部导航 默认打开左边第一个菜单；
         */
        firstActive(item) {
            let _item = this.getChildren(item);
            if (_item.showType == 'URL') {
                this.navClick(_item);
                //添加-导航栏；
                this.handNavBars(_item);
                //URL访问
                this.openUrl(_item);
            } else if (_item.showType == 'NEW_WIN') {
                //新窗口
                this.openNewWin(_item);
            }

        },
        openUrl(item) {
            this.setSelecteKeys([item.key]);

            var pathParams = this.handMenuPath(item);
            this.generatePath(item.id);
            if (this.showType != 'newPage' || item.key == 'design') {
                this.$router.push(pathParams);
            }
        },
        openNewWin(item) {
            var path = process.env.VUE_APP_ADMIN_FRONT;
            var aryMenuPath = this.getMenuPath(item.id);
            var url = path;
            for (var i = 0; i < aryMenuPath.length; i++) {
                url += "/" + aryMenuPath[i].menuKey;
            }
            window.open(url, '_blank');
        },
        generatePath(id) {
            var aryMenuPath = this.getMenuPath(id);
            //将菜单路径发布到VUEX
            this.setMenuPath(aryMenuPath)
        },
        getMenuPath(id) {
            var aryMenuPath = [];
            var obj = this.menuMap[id];
            aryMenuPath.push(obj)

            while (obj.parentId != '0') {
                obj = this.menuMap[obj.parentId];
                aryMenuPath.unshift(obj);
            }
            return aryMenuPath;
        },
        goToPath(name) {
            this.$router.push({
                name: name
            });
        },
        toggle() {
            this.setCollapsed(!this.collapsed)
        },
        /**
         * 初始化左侧菜单。
         * 1.如果选中了应用，则判断是否显示左侧菜单
         * 2.如果没有选中，则选中第一个应用。
         */
        initLeftMenu() {
            let apps = this.menus;
            if (!apps || apps.length == 0) {
                this.setCollapsed(true);
                return;
            }

            let curApps = apps.filter(item => item.navType == this.navType);
            //如果没有选中的应用 或没有应用
            if (curApps.length == 0) {
                this.setCollapsed(true);
                return;
            }

            //有选中选中应用的情况。
            if (this.appKey) {
                let appAry = curApps.filter(item => { return item.key == this.appKey });
                if (appAry.length > 0) {
                    let app = appAry[0];
                    this.setLeftMenuByApp(app);
                    return;
                }

                this.leftMenu = {};
                this.setCollapsed(false);
                return;
            }
            //如果没有选中的appKey那么就获取第一个应用。
            let app = curApps[0];
            this.setLeftMenuByApp(app);

        },
        /**
         * 根据应用设置左侧菜单
         */
        setLeftMenuByApp(app) {
            this.setAppKey(app.key);
            if (app.children && app.children.length > 0) {
                this.leftMenu = app;
                this.setCollapsed(false);
            }
            else {
                this.leftMenu = {};
                this.setCollapsed(true);
            }
        },
        setComponentAry(state) { //新页面打开 调用组件；
            let _nav = this.navTabs;
            if (state == 'onload') {
                this.componentAry = [];
            }
            _nav.forEach((item, index) => {
                let compt = '';
                if (item.key == "home-index") {
                    compt = require('@/views/dashboard/index');
                } else if (item.component && !['FUNS_BLOCK', 'FUNS', 'FUN', 'iframe'].includes(item
                    .settingType)) {
                    compt = require('@/views/' + item.component)
                }
                if (item.showType == "FUNS_BLOCK") {
                    compt = require('@/views/modules/system/core/MenuViewFunsBlock');
                    item.cmptKey = item.id
                }
                if (item.showType == "FUNS") {
                    compt = require('@/views/modules/system/core/MenuViewFuns');
                    item.cmptKey = item.id
                }
                if (item.showType == "FUN") {
                    compt = require('@/views/modules/system/core/MenuViewFun');
                    item.cmptKey = item.id
                }
                if (item.settingType == "iframe") {
                    compt = require('@/layouts/UrlView.vue');
                }
                let _obj = {
                    cmpt: compt.default,
                    key: item.key,
                    cmptKey: item.cmptKey ? item.cmptKey : item.key == 'home-index' ? 'home' : item.key + index,
                    params: item.params,
                    props: item.props ? item.props : {},
                    id: item.id
                }
                let _isKey = this.componentAry.findIndex(item => { return _obj.key == item.key })
                if (state == 'add') {
                    if (_isKey < 0) {
                        this.componentAry.push(_obj);
                    }
                } else if (state == 'remove') {
                    this.componentAry = this.componentAry.filter(item => {
                        return item.key == _obj.key;
                    })
                } else if (state == 'onload') {
                    this.componentAry.push(_obj);
                }

            })
        },
        /**
         * 根据路由设置初始化选择应用和需要打开的菜单数据和设置面包屑。
         */
        initByRouter() {
            //获取路由名称
            let key = this.$route.name;

            if (!key) {
                return;
            }
            // 获取应用
            let apps = this.menus.filter(item => {
                return item.navType == this.navType;
            });

            for (var i = 0; i < apps.length; i++) {
                let app = apps[i];
                // 如果应用没有下级菜单直接跳过。
                if (!app.children) {
                    continue;
                }
                //获取路由对应的菜单数据
                var menu = getMenuByKey(key, app.children);
                if (!menu) {
                    continue;
                }
                //设置选中的应用。
                this.setAppKey(app.key);
                // 设置选中的菜单。
                this.setActiveKey(menu.key);

                //处理导航条。
                this.handNavBars(menu);

                return;
            }


        },
        getVersion() {
            let self = this;
            SysPropertiesApi.getConfigMapByTenant().then(res => {
                let result = res.data;
                if (result.siteSetting) {
                    let sitettingJson = JSON.parse(result.siteSetting.confs);
                    if (sitettingJson.loginPageConfig) {
                        self.version = sitettingJson.loginPageConfig.homePageVersion;
                    }
                    self.setSiteName(sitettingJson.homePageTitle);
                    localStorage.setItem("siteName",sitettingJson.homePageTitle);
                    localStorage.setItem("linkLogoUrl",sitettingJson.linkLogoUrl || "");
                } else if (result.loginPageConfig) {
                    self.version = result.loginPageConfig.homePageVersion;
                }
            });
        },
        initState() {
            let curUser = localStorage.getItem("curUser");
            if (curUser && localStorage.getItem(`layoutStyleConfig_${curUser}`)) {
                let obj = JSON.parse(localStorage.getItem(`layoutStyleConfig_${curUser}`));
                let event = {
                    'menuStyle': 'setMenuStyle',
                    'background': 'backgroundkey',
                    'sideBar_Background': 'sideBar_Backgroundkey',
                    'systemStyle': 'setsystemStyle'
                }
                for (let key in obj) {
                    this[event[key]](obj[key])
                }
            }
            /*首页换肤--yangxin*/
            let _colorStyle = localStorage.getItem(`colorStyle_${curUser}`);
            if (_colorStyle) {
                document.getElementById('colorStyle').setAttribute("href", _colorStyle); //实现将主题保存在内存中刷新浏览器不改变
            }
        },
        init() {
            this.initState()
            this.initByRouter();
            //默认第一条数据
            this.initLeftMenu();
            this.getVersion()
        },
        /**
         * 获取所有的应用，其他的地方可以使用应用ID，找到应用名称。
         */
        getAllApps() {
            //获取所有应用
            SysAppApi.getAllApps().then(res => {
                var apps = {};
                res.map(app => {
                    apps[app.appId] = { appName: app.clientName, }
                });
                this.setAllApps(apps);
            });
        },
        /**
         * 处理首页点击
         */
        handHomePageChange() {
            var pathParams = { name: 'home-index' }
            this.setActiveKey('home-index');
            this.$router.push(pathParams);
        }
    },
    watch: {
        $route(to, from) { //監聽路由變化 刷新組件;
            let _urlType = "";
            this.initByRouter();
            if (this.$route.params && this.$route.params.urlType) {
                _urlType = this.$route.params.urlType;
            }
            if (this.$route.fullPath.indexOf('editPage') > -1 || _urlType) {
                this.routeKeepAlive = false;
                this.routeKey = "K" + new Date().getTime();
            } else {
                this.routeKeepAlive = true
            }
        },
        navigation: {
            handler: function (o, ol) {
                if (this.showType != 'window') {
                    let state = 'add';
                    if (o.length < ol.length) {
                        state = 'remove'
                    }
                    this.setComponentAry(state);
                }
            },
            deep: true
        },
        activeKey(o, ol) {
            if (this.showType != 'window') {
                this.$nextTick(function () {
                    let pre = this.$refs['ref' + o];
                    if (pre && pre[0].newPageInit) {
                        pre[0].newPageInit(o);
                    }
                })
            }
        },
        leftMenu: {
            //当菜单为空时候关闭展示
            handler: function (o, ol) {
                if (o.children) {
                    this.width = '210px'
                    this.setCollapsed(false);
                } else {
                    this.setCollapsed(true);
                    this.width = '66px'
                }
            },
            deep: true
        },
        /**
         * 前端类型更改时，重新加载菜单。
         */
        frontType: function () {
            this.init();
        }


    }
}
</script>
<style scoped>
.frontLoading {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -45px;
    text-align: center;
    font-size: 16px;
    z-index: 999;
}

/*就是4个">" 别删*/
#appPortalHome ::v-deep >div,
#appPortalHome
{
    height: 100%;
}

.shade {
    position: absolute;
    top: 0px;
    left: 40px;
    width: calc(100% - 30px);
    height: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, .2);

}

.rxMainLayoutUse_white_iconfont i {
    color: #999 !important;
}
.rxMainLayout_logo{
    height: 60px;
}

.MainLayout_hearlist {
    line-height: normal;
    padding: 0;
    display: flex;
    height: 60px !important;
    width: 100%;
    z-index: 99;
}

.menuBox_white>>>.amenu_head span:nth-child(1) i,
.menuBox_white>>>.amenu_head span:nth-child(2) {
    color: #555 !important;
}


.amenu_head span:nth-child(1) {
    height: 25px;
    line-height: 35px;
    text-align: center;
    margin-top: 10px;
}

.amenu_head span:nth-child(2) {
    line-height: 40px;
    height: 40px;
    color: white;
    text-align: center;
}

.amenu_head span:nth-child(1) i {
    font-size: 22px;
    color: white;
    margin-left: 10px;
}

.rxMainLayoutUse_iconfont>div {
    width: 30px;
    text-align: center;
    overflow: hidden;
    line-height: 30px;
    margin: auto;

}

.rxMainLayoutUse_iconfont>div>span {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    display: block;
    margin: 2px 0px;
}

.rxMainLayoutUse_iconfont>div:hover>spanr {
    background-color: #464c67;
    cursor: pointer;
}

.aicon_white i {
    color: #46494d !important;
}

.rxMainLayoutUse_iconfont_hover i {
    color: white !important;
}

.sideBar_white>div:nth-child(1) {
    border-bottom: 1px solid #ddd !important;
}

.rxMainLayoutUse_iconfont>div:nth-child(1) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.rxMainLayoutUse_iconfont>div i {
    font-size: 20px;
}

.rxMainLayoutUse {
    flex: 1;
    width: 100%;
    height: 100%;
    /*border-top: 1px solid rgba(255,255,255,0.15);*/
    overflow: auto;
}


/**/
.load-span {
    position: fixed;
    top: 50%;
    left: 50%;
}

#components-layout-demo-fixed-sider .trigger {
    font-size: 18px;
    line-height: 51px;
    padding: 0 30px;
    cursor: pointer;
    transition: color 0.3s;
}

.index-layout-centers {
    overflow: initial;
    width: 100%;
    height: 100%;
    flex-direction: column;
    display: flex;
}

.index-layout-centers>.center {
    width: 100%;
    flex: 1;
    overflow: auto;
    border-radius: 0;
    position: relative;
}



.menu>li {
    display: inline-block;
    padding: 0 10px 0 10px;
}


.a-header-box>>>.ant-menu-horizontal {
    border-bottom: 0;
}

.rxMenuBox{
    background-color: white;
    border-right: 1px solid #ddd;
}
.rxMenuBox>>>.ant-menu:not(.ant-menu-sub) {
    max-height: calc(100% - 66px);
    overflow-y: auto;
    overflow-x: hidden;
}

.logofold>>>.floa_left {
    margin: 0;
}

.logofold>>>.floa_left img {
    width: 30px;
}

.logofold {
    margin: 0;
    padding-left: 2px;
    display: flex;
    align-items: center;
    padding-top: 0;
}

.ant-layout-sider-collapsed .logofold {
    margin-left: 13px;
}

.miniFront{
    color: #fff;
    padding: 10px 10px 10px 20px;
    border-bottom: 1px solid #fff;
    font-size: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rx-version-box {
    display: flex;
    align-items: normal;
    justify-content: space-between;
    color: #555;
    border-top: solid 1px rgba(255,255,255,.1);
    background-color: white;
    border-right: 1px solid #ddd;
}

.rx-version-padding {
    padding-left: 24px;
}
.app-layout{
    height: 100%;
    overflow: hidden;
}
.container-layout{
    flex: 1 0 0;
    margin-right: 30px;
}
</style>
